<template>
<div class="barMain">
    <div class="barBox">
        <div class="barBoxL" @click="pageTurn('-1')" v-if="index != 0">上一页</div>
        <div class="barBoxR" @click="pageTurn('+1')" v-if="index != (vesselList.length-1)">下一页</div>
    </div>
    <div id="barCodeMain">
        <svg id="barcode"></svg>
    </div>
    <div slot="footer" class="dialog-footer">
        <el-button type="primary" v-print="'#barcode'">打 印</el-button>
    </div>
</div>
</template>

<script>
import JsBarcode from 'jsbarcode'
export default {
    name:'barCode',
    props:{
      vesselList:{
        type: Array,
        required: true
      }
    },
    data(){
        return {
            index: 0,
        }
    },
    mounted(){
        this.barcode()
    },
    methods: {
      barcode(){
        const text = this.vesselList[this.index]
        JsBarcode("#barcode", text,{
          format: "CODE128", //选择要使用的条形码类型
          text,    //显示文本
          fontSize: 28,
          displayValue: true, //是否在条形码下方显示文字
          textPosition: "bottom", //设置文本的垂直位置
          background:'rgba(0,0,0,0)', //设置条形码的背景
          font:"fantasy", //设置文本的字体
          lineColor:"#000", //设置条和文本的颜色。
          margin:6 //设置条形码周围的空白边距
        })

      },
      pageTurn(val) {
        this.index = Number(this.index) + Number(val)
        this.barcode()
      },
    }
}
</script>

<style scoped>
.barMain{
    overflow: hidden;
    height:230px;
    position: relative;
}
.barBox{
    position: absolute;
    height: 70px;
    top:2px;
    width:94%;
    left:3%;
    z-index:999;

}
.barBoxL{
    float: left;
    cursor: pointer;
}
.barBoxR{
    float: right;
    cursor: pointer;
}
.dialog-footer {
    width:90px;
    text-align: right;
    font-size: 16px;
    font-weight: bolder;
    position: absolute;
    bottom:1px;
    right:5px;
    z-index:1000;
}
</style>
<style lang="scss">
#barCodeMain{
    height:100px;
    position: relative;//父元素设置绝对定位
}
#barcode{
    width: 80%;
    position:absolute;//相对定位
    top:30px;
    right:10%;
    margin:0 auto;
    height:150px;
}
@media print {
 #barcode{
    left: 11px;
    right: 13%;
    top:0;
}
}
</style>
